<template>
  <div>
    <head-top routerName="task" title="实名认证"></head-top>
    <div class="content-wrap">
      <van-form @submit="onSubmit" autocomplete="off">
        <van-field
          v-model="formData.mobile"
          name="请输入手机号码"
          label="手机号"
          readonly
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          v-model="formData.userName"
          type="userName"
          name="请输入姓名"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.cardId"
          type="cardId"
          name="请输入身份证号"
          label="身份证号"
          placeholder="请输入身份证号"
          :rules="[{ required: true , message: '请输入身份证号' }]"
        />
        <div class="left">
          <van-field
            v-model="formData.smsCode"
            type="smsCode"
            name="短信验证码"
            placeholder="短信验证码"
            :rules="[{ required: true, message: '短信验证码' }]"
          />
          <div class="Code" @click="getCode()" :class="count ? 'success' : ''">
            <van-loading v-if="loading" size="20" />
            <span v-if="!count">获取验证码</span
            ><span v-else>重新获取 {{ count }}s</span>
          </div>
        </div>
        <van-field
          v-model="formData.provincesCities"
          is-link
          readonly
          label="所在地区"
          placeholder=""
          name="请选择所在地区"
          class="message"
          @click="$refs.area.show = true"
          :rules="[{ required: true, message: '请选择所在地区' }]"
        />
        <div style="margin: 16px">
          <van-button block type="danger" native-type="submit">认证</van-button>
        </div>
      </van-form>
    </div>
    <v-area ref="area" @area-event="areaEvent"></v-area>
  </div>
</template>
<script>
import HeadTop from "@/components/head";
import { Form, Field, Button, Notify, Toast, Loading } from "vant";
import { sendingSms, certification } from "@/api/authentication";
import { mobile } from "@/utils/APPempower";
export default {
  components: {
    HeadTop,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
    [Notify.Component.name]: Notify.Component,
    vArea: (resolve) => require(["./area"], resolve),
  },
  data() {
    return {
      count: "",
      timer: null,
      loading: false,
      formData: {
        cardId: "",
        provinces: "",
        cities: "",
        userName: "",
        smsCode: "",

        mobile: mobile(),
        provincesCities: "",
      },
    };
  },
  methods: {
    validator(val) {
      return /(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
    },
    getCode() {
      if (!this.formData.mobile) {
        Notify({ type: "danger", message: "请输入手机号码" });
        return false;
      }
      const TIME_COUNT = 120;
      if (!this.timer) {
        let data = {
          mobile: this.formData.mobile,
        };
        this.loading = true;
        sendingSms(data).then((res) => {
          this.loading = false;
          if (res.data.resultStatus) {
            this.count = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          } else {
            Notify({ type: "danger", message: res.data.errorMessage });
          }
        });
      }
    },
    onSubmit() {
      if(!this.validator(this.formData.cardId)){
        Toast('身份证号码不正确');
        return
      }
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "认证中...",
      });
      var formData = {
        cardId: this.formData.cardId,
        provinces: this.formData.provinces,
        cities: this.formData.cities,
        userName: this.formData.userName,
        smsCode: this.formData.smsCode,
      }
      certification(formData).then((res) => {
        if (res.data.resultStatus) {
          Toast.success(res.data.errorMessage);
        } else {
          Toast.fail(res.data.errorMessage);
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
    },
    areaEvent(list) {
      const map = {};
      this.formData.provincesCities = "";
      for (let index = 0; index < list.length; index++) {
        var item = list[index];
        if (!map[item.name]) {
          if (index === 1) {
            this.formData.provincesCities += "/" + item.name;
          } else {
            this.formData.provincesCities += item.name;
          }
          map[item.name] = item;
        }
        if (index === 0) {
          this.formData.provinces = item.name;
        } else if (index === 1) {
          this.formData.cities = item.name;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-form {
    .van-cell {
      margin-bottom: 18px;
      padding: 13px 0;
      height: 20px;
      line-height: 20px;
      box-sizing: content-box;
      /deep/.van-field__value {
        .van-field__error-message {
          display: none;
        }
        input {
          text-align: right;
          font-size: 14px;
          font-weight: 400;
        }
      }
      /deep/.van-cell__right-icon {
        line-height: 20px;
        height: 20px;
      }
      /deep/.van-cell__title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      &:after {
        right: 0;
        left: 0;
        border-bottom: 1px solid #ebedf0;
      }
      &.message {
        /deep/.van-field__value {
          .van-field__error-message {
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
    }
    .left {
      position: relative;
      .Code {
        position: absolute;
        display: inline-block;
        right: 0;
        top: 13px;
        height: 20px;
        padding-left: 11px;
        color: #fe4b08;
        display: flex;
        border-left: 1px solid #eeeeee;
        span {
          display: inline-block;
          line-height: 20px;
          font-size: 14px;
          font-weight: 400;
        }
        .van-loading {
          width: 20px;
          height: 20px;
          line-height: 20px;
          margin: 0;
          padding: 0;
        }
      }
      /deep/ .van-field__value {
        input {
          text-align: left;
        }
      }
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    .van-button {
      margin-top: 164px;
      height: 46px;
      line-height: 46px;
      font-size: 16px;
      background: #fd2f55;
      border: none;
      border-radius: 2px;
    }
  }
}
</style>